{% extends "jobs/base.html" %}

{% block title %}{{ job.title }} · FirstByte{% endblock %}

{% block content %}
<h1>{{ job.title }}</h1>
<span style="display:inline-block; font-size:12px; font-weight:600; padding:2px 10px; border-radius:12px; margin-bottom:6px;
    {% if job.level == 'ENTRY' %}background:#e3f2e5; color:#2e7d32;
    {% elif job.level == 'INTERMEDIATE' %}background:#fff3e0; color:#c47d00;
    {% else %}background:#fdeaea; color:#c62828;{% endif %}">
    {{ job.get_level_display }} level
</span>

<p style="color:#555;">
    {% if job.category %}{{ job.category.name }}{% endif %}
    {% if job.budget %} &middot; {{ job.budget }}{% endif %}
    {% if job.deadline %} &middot; Deadline: {{ job.deadline|date:"j M Y" }}{% endif %}
</p>

<p style="margin-top:16px;">{{ job.description }}</p>

<hr style="margin:24px 0; border:none; border-top:1px solid #eee;">
<!--This handle who can see the aplication option for the jobs-->
{% if user.is_authenticated %}
    {% if user == job.client %}
        <p style="color:#555;">This is your job posting. <a href="{% url 'my_posted_jobs' %}">Manage your posted jobs</a>.</p>
    {% elif user.profile.role == 'CLIENT' %}
        <p style="color:#555;">Only professional accounts can apply to jobs.</p>
    {% elif already_applied %}
        <p style="color:#2e7d32; font-weight:bold;">✓ You have already applied to this job.</p>
    {% else %}
        <h3>Apply for this job</h3>
        <form method="post" action="{% url 'apply_to_job' job.id %}" style="max-width:500px;">
            {% csrf_token %}
            <p>
                <label for="cover_message">Message to the client (optional):</label><br>
                <textarea name="cover_message" id="cover_message" rows="4" style="width:100%;"></textarea>
            </p>
            <button type="submit" style="background:#243E64; color:#fff; border:none; padding:10px 18px; border-radius:6px; cursor:pointer;">Apply now</button>
        </form>
    {% endif %}
{% else %}
    <p><a href="{% url 'login' %}">Log in</a> to apply for this job.</p>
{% endif %}

<p style="margin-top:24px;"><a href="{% url 'job_list' %}">← Back to all jobs</a></p>
{% endblock %}